<template>
  <view class="home" style="background: #000000">



    <view v-if="hasChange == true" style="margin-top:0px;display: flex;background: #ffffff;
          position: fixed;z-index: 9998;width: 100%;height: 50px;border-bottom: 0px solid #F7F7F7;opacity: 1;">
      <navigator :url="iURL">
        <image src="/static/bib/icon_home_menu.png"
               style="width: 27px;height: 27px;position: fixed;left: 13px;top: 13px;z-index: 9999;"></image>
      </navigator>

      <view
          style="background: #242424;width: 200px;height:30px;border-radius: 14px;position: fixed;left: 60px;top: 10px;display: flex;"
          @click="$utils.jump('/pages/index/home_search')">
        <image src="/static/bib/icon_common_search.png"
               style="width: 15px;height: 15px;margin-left: 10px;margin-top: 7.5px;">
        </image>

        <view style="color: #aaaaaa;height: 18px;margin-top: 6px;margin-left: 4px;line-height: 18px;">BTC</view>

      </view>


      <image src="/static/image/icon/yaoqing.png" class="text-white font-size-30"
             @click="$utils.jump('/pages/invite/invite')"
             style="width: 22px;height: 22px;position: fixed;top: 13px;right: 95px;z-index: 9999;">

        <image src="/static/bib/icon_home_message.png" class="text-white font-size-36"
               @click="$utils.jump('/pages/common/msg')"
               style="width: 22px;height: 22px;position: fixed;top: 12px;right: 55px;z-index: 9999;">

          <image src="/static/lang.png" mode="" @click="homeFn"
                 style="width: 24px;height: 24px;position: fixed;top: 14px;right: 15px;z-index: 9999;"></image>

    </view>

    <view v-else
          style="margin-top:0px;display: flex;position: fixed;z-index: 9998;width: 100%;height: 50px;background: #000000;">

      <navigator :url="iURL">
        <image src="/static/bib/icon_home_menu.png"
               style="width: 28px;height: 28px;position: fixed;left: 10px;top: 12px;z-index: 9999;"></image>
      </navigator>

      <view
          style="background: #242424;width: 200px;height:30px;border-radius: 14px;position: fixed;left: 60px;top: 10px;display: flex;"

          @click="$utils.jump('/pages/index/home_search')">
        <image src="/static/bib/icon_common_search.png"
               style="width: 15px;height: 15px;margin-left: 10px;margin-top: 7.5px;">
        </image>
        <view style="color: #aaaaaa;height: 18px;margin-top: 6px;margin-left: 4px;">BTC</view>

      </view>


      <image src="/static/image/icon/yaoqing.png" class="text-white"
             @click="$utils.jump('/pages/invite/invite')"
             style="width:22px;height: 22px;position: fixed;top: 12px;right: 95px;z-index: 9999;">

        <image src="/static/bib/icon_home_message.png" class="text-white"

               @click="$utils.jump('/pages/common/msg')"
               style="width: 25px;height: 25px;position: fixed;top: 15px;right: 55px;z-index: 9999;">

          <image src="/static/lang.png" mode="" @click="homeFn"
                 style="width: 24px;height: 24px;position: fixed;top: 13px;right: 15px;z-index: 9999;"></image>


    </view>
  



    <view class="position-relative" style="z-index: 1;margin: 0;padding: 0;margin-top:0px">


      <!-- 轮播图 -->
      <view class="mt-2" style="margin: 30px;">
        <!--
        <swiper :indicator-dots="true" :autoplay="true" :interval="4000" style="height: 400rpx;margin-top:0px;">
          <swiper-item v-for="item in swiper">
            <image :src="item.image" style="width: 100%;height: 400rpx;" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
        -->
        <image src="../../static/bib/image_home_top_login_yes.png" style="width: 100%;height:420px;text-align: center;margin-top: 60px;"></image>
        <!-- <u-swiper :list="swiper" border-radius="20" height="200" indicator-pos="bottomRight" :interval="3000" img-mode="aspectFill">
        </u-swiper> -->
      </view>
      <!-- 公告 -->
      <view class="mt-2" style="display: flex;justify-content: center;align-items: center;text-align: center;font-weight: 700px;font-size: 23px;">
        {{ $t("home1") }}
      </view>
      <view class="mt-2" style="display: flex;justify-content: center;align-items: center;text-align: center;font-weight:500px;font-size: 16px;color: #939393;">
        {{$t("home2")}}
      </view>

<!--      <view class="mt-2"-->
<!--            style="position: relative;top:13px;z-index: 9999999;left: 5px;width: 100%;height: 40px;display: flex;">-->
<!--        <button  type="default"  class="connect_btn"-->
<!--                 @click="$utils.jump('/pages/fund/select?url=receive')"-->
<!--                 style="width: 80%;margin-left: 10%;border-radius: 20px;color: #000000;line-height: 40px;font-size: 16;font-weight: 500;">-->
<!--          充值数字货币-->
<!--        </button>-->
<!--      </view>-->
      <view class="mt-2"
            style="position: relative;top:13px;z-index: 9999999;left: 5px;width: 100%;height: 40px;display: flex;">

        <div class="tran_btn connect_btn"
             @click="$utils.jump('/pages/fund/select?url=receive')"
             style="width: 80%;margin-right: 20px;margin-left: 10px;
                 color: #ffffff;line-height: 40px;font-size: 16;font-weight: 500;height: 40px;">
          <text class="bib" style="color: #ffffff;font-weight: 700;">
            {{ $t("home3") }}
          </text>

        </div>

        <div class="tran_btn connect_btn"
             @click="$utils.jump('/pages/transaction/contract')"
             style="width: 80%;margin-right: 20px;margin-left: 10px;
                 color: #ffffff;line-height: 40px;font-size: 16;font-weight: 500;height: 40px;">
          <text class="bib" style="color: #ffffff;font-weight: 700;">
            {{ $t("home4") }}
          </text>

        </div>


      </view>

      <swiper style="height: 200rpx;width: 100%;margin: 0;padding: 0;margin-top: 34px;" class="text-white"
              :autoplay="false" :indicator-dots="false" :indicator-active-color="$downColor">
        <swiper-item v-for="(el,index) in homeNav">
          <view class="py-10" style="height: 312rpx;width: 100%;">
            <view class="d-flex flex-wrap" style="width: 100%;">
              <view v-for="item in homeNav[index]" @click="homeNavJump(item.url,item.open_type)"
                    class="w-20 text-center py-22" :key="item.icon">

                <view v-if="item.icon == 'home-nav-9' " >
                  <image :src="`../../static/image/icon/${item.icon}.png`"
                         class="d-block mx-auto"
                         style="width: 74rpx;height: 60rpx;margin-top: 0px;padding-left: 10px;border-radius: 4px;"
                         mode="">
                </view>

                <view v-else-if="item.icon == 'yaoqing' "  style="height: 60rpx;">
                  <image :src="`../../static/image/icon/${item.icon}.png`"
                         class="d-block mx-auto"
                         style="width: 48rpx;height: 48rpx;padding-top: 4px;padding-left: 10px;border-radius: 4px;"
                         mode="">
                  </image>
                </view>

                <view v-else-if="item.icon == 'new0822' "  style="height: 60rpx;">
                  <image :src="`../../static/image/icon/${item.icon}.png`"
                         class="d-block mx-auto"
                         style="width: 50rpx;height: 50rpx;padding-top: 4px;padding-left: 10px;border-radius: 4px;"
                         mode="">
                  </image>
                </view>
                <view v-else-if="item.icon == 'icon_my_home_s' "  style="height: 60rpx;">
                  <image :src="`../../static/image/icon/icon_my_home_s.png`"
                         class="d-block mx-auto"
                         style="width: 50rpx;height: 50rpx;padding-top: 4px;padding-left: 10px;border-radius: 4px;"
                         mode="">
                  </image>
                </view>
                <view v-else-if="item.icon == 'icon_my_home_s' "  style="height: 60rpx;">
                  <image :src="`../../static/image/icon/${item.icon}.png`"
                         class="d-block mx-auto"
                         style="width: 50rpx;height: 50rpx;padding-top: 4px;padding-left: 10px;border-radius: 4px;"
                         mode="">
                  </image>
                </view>




                <image :src="`../../static/image/icon/${item.icon}.png`" v-else
                       class="d-block mx-auto" style="width: 60rpx;height: 60rpx;border-radius: 4px;" mode="">
                </image>

                <text class="d-block font-size-22 mt-16" v-if="item.icon == 'new0822' "
                      style="font-family:'googlesmall';color: #ffffff;margin-top: -13px;padding-left:0px;margin-left: 6px;">
                  {{ item.name }}
                </text>
                <text class="d-block font-size-22 mt-16" v-else
                      style="font-family:'googlesmall';color: #ffffff;text-align: center;width: 100%;">{{ item.name }}
                </text>
              </view>
            </view>
          </view>
        </swiper-item>
        <data-loading v-if="!homeNav.length"></data-loading>
      </swiper>
    </view>


    <view class="mt-0 px-36" style="background: #000000;border-top: 0px solid #242424;">

      <view class="mt-20 high-quality-project">
        <swiper style="height: 250rpx;" :acceleration="true" :display-multiple-items="3" :indicator-dots="false"
                @change="gupiaoSwiperChange" indicator-color="rgba(255, 255, 255, 0.6)"
                indicator-active-color="rgba(7, 193, 96, 0.7)" :autoplay="false" :circular="false">
          <swiper-item v-for="(item,index) in quotation" class="swiper-item8">
            <navigator
                class="high-quality-project-item text-center overflow-hidden w-100 pt-40 swiper-item8"
                style="box-sizing: border-box;" open-type="reLaunch"
                :url="`/pages/transaction/spot_kline?from=index&currency_name=${item.currencyName}&legal_name=USDT&currency_id=${item.id}`">

              <view class="text-left pl-30 text-white" style="margin-top: -30rpx;background: #000000">
                <view style="display: flex;">
                  <text class="font-size-26 d-block "
                        style="flex: 1;height: 20px;line-height: 20px;color: #ffffff;font-weight: 700;">
                    {{ item.currencyName + '/USDT' }}
                  </text>
                  <text class="d-block font-size-20 mt-6"
                        :style="{color:$utils.getColor(item.change)}"
                        style="width: 80px;height:16px;line-height:16px;margin-top: 2px;font-weight: 500;margin-left: 10px;font-size: 14px;">
                    {{ Number(item.change).toFixed(2) + '%' }}
                  </text>
                </view>


                <text class="d-block font-size-44 font-weight-bold mt-16 "
                      :style="{color:$utils.getColor(item.change)}">{{ Number(item.close).toFixed(2) }}
                </text>
              </view>
              <view class="charts-box" style="border-bottom: none;margin-top: 20px;">

                <qiun-data-charts
                    type="line"
                    :opts="item.change>=0?optsGreen:optsRed"
                    :errorShow="false" background="none" :tooltipShow="false" :tapLegend="false"
                    :chartData="item.chartData"  style="border-bottom: none;width: 100%;margin-left: 10px;"
                />

                <!--                <qiun-data-charts-->
                <!--                    type="line"-->
                <!--                    :opts="item.change>=0?optsGreen:optsRed"-->
                <!--                    :errorShow="false" background="none" :tooltipShow="false" :tapLegend="false"-->
                <!--                    :chartData="chartDataETH"  style="border-bottom: none;"  v-if="item.currencyName=='ETH' "-->
                <!--                />-->


                <!--                <qiun-data-charts-->
                <!--                    type="line"-->
                <!--                    :opts="item.change>=0?optsGreen:optsRed"-->
                <!--                    :errorShow="false" background="none" :tooltipShow="false" :tapLegend="false"-->
                <!--                    :chartData="chartDataBNB"  style="border-bottom: none;"  v-if="item.currencyName=='BNB' "-->
                <!--                />-->
                <!--                <qiun-data-charts-->
                <!--                    type="line"-->
                <!--                    :opts="item.change>=0?optsGreen:optsRed"-->
                <!--                    :errorShow="false" background="none" :tooltipShow="false" :tapLegend="false"-->
                <!--                    :chartData="chartDataTRX"  style="border-bottom: none;"  v-if="item.currencyName=='ETC' "-->
                <!--                />-->
                <!--                <qiun-data-charts-->
                <!--                    type="line"-->
                <!--                    :opts="item.change>=0?optsGreen:optsRed"-->
                <!--                    :errorShow="false" background="none" :tooltipShow="false" :tapLegend="false"-->
                <!--                    :chartData="chartDataLTC"  style="border-bottom: none;"  v-if="item.currencyName=='LTC' "-->
                <!--                />-->
                <!--                <qiun-data-charts-->
                <!--                    type="line"-->
                <!--                    :opts="item.change>=0?optsGreen:optsRed"-->
                <!--                    :errorShow="false" background="none" :tooltipShow="false" :tapLegend="false"-->
                <!--                    :chartData="chartDataADA"  style="border-bottom: none;"  v-if="item.currencyName=='ADA' "-->
                <!--                />-->


              </view>

            </navigator>
          </swiper-item>
        </swiper>

      </view>
    </view>


    <view style="display: flex;padding: 0px;background: #000000;margin-top: -1px;">
      <!-- c2c买币 -->
      <view
          class="mt-10 text-white border-radius-10 py-20 px-40 d-flex align-items-center justify-content-between"
          @click="c2cFn"
          style="flex: 1;margin: 5px;background: #242424;margin-top: 0px;margin-left: 10px;margin-right: 10px;">
        <view class="d-flex align-items-center" style="padding-top: 0px;">

          <view class="ml-10">
            <text class="d-block font-size-32"
                  style="color: #ffffff;width: 80px;">{{ i18n.quicklyBuyCoins }}</text>
            <text class="d-block font-size-22"
                  style="opacity: .5;color: #ffffff;">{{ $t("common.quickly") + ' ' + $t("common.buy") }} USDT
            </text>
          </view>
        </view>
        <view class="d-flex" style="width: 80rpx;height: 60rpx;border-radius: 50%;">
          <image src="/static/image/icon/buycoin2.png" style="width: 80rpx; height: 55rpx;"></image>
        </view>
      </view>



      <view v-if="false"
          class="mt-10 text-white border-radius-10 py-20 px-40 d-flex align-items-center justify-content-between"
          @click="$utils.jump('/pages/follow/index')"
          style="flex: 1;margin: 5px;background: #242424;margin-top: 0px;">
        <view class="d-flex align-items-center" style="padding-top: 0px;">

          <view class="ml-10" style="margin-left: -10px;padding-left: -10px;">
            <text class="d-block font-size-32" style="color: #ffffff;">{{ $t('follow.follow') }}</text>
            <text class="d-block font-size-22"
                  style="opacity: .5;color: #ffffff;">{{ $t("follow.follow_tip") }}
            </text>
          </view>
        </view>
        <view class="d-flex"
              style="width: 60rpx;height: 60rpx;border-radius: 50%;align-items: center;justify-content: center;">
          <image src="/static/image/icon/gendan2.png" style="width: 60rpx; height: 60rpx;"></image>
        </view>
      </view>

    </view>



    <!-- tab切换行情 -->
    <view class="mt-20 market " style="border-top: 0px solid #f7f7f7;">
      <view class="d-flex justify-content-between align-items-center  px-36" style="margin-top: 10px;"
            v-if="false">
        <view class="d-flex align-items-center ">
          <text class="font-size-32 d-block mr-20 text-warning" style="color: #000;">{{ i18n.market }}</text>
        </view>
        <view class="d-flex align-items-center">
          <text class="font-size-32" style="color: #999999;">{{ i18n.more }}</text>
          <text class="iconfont icon-gengduo1 ml-10" @click="$utils.jump('/pages/market/market','switchTab')"
                style="color: #999;position: relative;top: .5px;"></text>
        </view>
      </view>

      <div>
        <swiper style="height:50px;" :acceleration="true" :display-multiple-items="5" :indicator-dots="false"
                @change="gupiaoSwiperChange" indicator-color="rgba(255, 255, 255, 0.6)"
                indicator-active-color="rgba(7, 193, 96, 0.7)" :autoplay="false" :circular="false">
          <swiper-item v-for="(item,index) in tabList" class="swiper-item8">

            <view class="text-left pl-30 text-white" style="margin-top:30rpx;background: #000000"  @click="changeTab(item.id)">

              <view style="display: flex;" :class=" currentTab == item.id ? 'currentTab':'normalTab2024' ">
                <text class="font-size-26 d-block "
                      style="flex: 1;height: 20px;line-height: 20px;font-weight: 700;text-align: center;">
                  {{ item.name}}
                </text>

              </view>

            </view>

          </swiper-item>
        </swiper>

<!--        <div style="flex: 1;font-size: 14px;font-family:'NotoSansSC-Bold';cursor: pointer;"-->
<!--             @click="changeTab(0)">-->
<!--          <span :class="currentTab==0 ?'activeTab':'normalTab' ">{{ $t('tabA0') }}</span>-->
<!--        </div>-->
<!--        <div style="flex: 1;font-size: 14px;font-family:'NotoSansSC-Bold';cursor: pointer;"-->
<!--             @click="changeTab(1)">-->
<!--          <span :class="currentTab==1 ?'activeTab':'normalTab' ">{{ $t('tabA1') }}</span>-->
<!--        </div>-->
<!--        <div style="flex: 1;font-size: 14px;font-family:'NotoSansSC-Bold';cursor: pointer;"-->
<!--             @click="changeTab(2)">-->
<!--          <span :class="currentTab==2 ?'activeTab':'normalTab' ">{{ $t('tabA1') }}</span>-->
<!--        </div>-->
<!--        <div style="flex: 1;font-size: 14px;font-family:'NotoSansSC-Bold';cursor: pointer;"-->
<!--             @click="changeTab(3)">-->
<!--          <span :class="currentTab==3 ?'activeTab':'normalTab' ">{{ $t('tabA1') }}</span>-->
<!--        </div>-->
<!--        <div style="flex: 1;font-size: 14px;color: #bbbbbb;font-family:'NotoSansSC-Bold';cursor: pointer;"-->
<!--             @click="changeTab(4)">-->
<!--          <span :class="currentTab==4 ?'activeTab':'normalTab' ">{{ $t('tabA4') }}</span>-->
<!--        </div>-->
<!--        <div style="flex: 1;font-size: 14px;color: #bbbbbb;font-family:'NotoSansSC-Bold';cursor: pointer;"-->
<!--             @click="changeTab(5)">-->
<!--          <span :class="currentTab==5 ?'activeTab':'normalTab' ">{{ $t('tabA5') }}</span>-->
<!--        </div>-->

      </div>


      <view class="px-30 mt-10 border-radius-10 p-20 mt-22 text-white" style="margin-top:0px;">
        <view class="title d-grid justify-content-between font-size-22"
              style="grid-template-columns:1.2fr 1.2fr .8fr">
          <view class="d-flex align-items-center">
            <text style="color: #939393;">{{ i18n.tradingPair }}</text>
          </view>
          <view class="d-flex align-items-center justify-content-center">
            <text style="color: #939393;">{{ i18n.lastPrice }}</text>
          </view>
          <view class="d-flex align-items-center justify-content-end">
            <text style="color: #939393;">{{ i18n.todayChange }}</text>
            <!-- <image :src="quotationNav[2].sort | sort2Icon" class="ml-8" style="width: 13.6rpx; height: 25.6rpx;">
            </image> -->
          </view>

        </view>
        <navigator class="market-item" v-for="item in quotationTabList" open-type="reLaunch"
                   style="border-bottom: none;height: 55px;"
                   :url="`/pages/transaction/${tabURL}?from=index&currency_name=${item.currencyName}&legal_name=USDT&currency_id=${item.id}`">


          <view class="left" style="display: flex;">
            <img style="width: 24px;height: 24px;margin-top:7px;" src="https://okx.huayi.me/coin/uni.png"  v-if="item.currencyName == 'UNI' "/>
            <img style="width: 24px;height: 24px;margin-top:7px;" :src="'https://okx.huayi.me'+item.logo"  v-else/>
            <view style="margin-left: 2px;">
              <text class="d-block">
                <text class="font-size-28 font-weight-bold"
                      style="color: #ffffff;">{{ item.currencyName }}</text>
                <text class="font-size-22 opacity-50" style="color: #fffff">/USDT</text>
              </text>
              <text class="d-block font-size-22" style="color: #666;margin-top: 3px;">24H:{{ (item.volume * 1.0).toFixed(2) }}
              </text>
            </view>


          </view>

          <view class="center">
            <text class="d-block font-size-28 font-weight-bold"
                  :style="{color:$utils.getColor(item.change)}">{{ item.close }}
            </text>
            <text class="d-block font-size-22" v-if="$store.state.fiat.currency_code != 'USD'">
              {{ (item.now_price * $store.state.fiat.rate).toFixed(2) }}
              {{ $store.state.fiat.currency_code }}
            </text>

          </view>
          <view class="right" :style="{backgroundColor:$utils.getColor(item.change)}"
                style="height: 25px;line-height: 25px;border-radius: 4px;">
            {{ Number(item.change).toFixed(2) + '%' }}
          </view>




        </navigator>

      </view>
    </view>

    <!--  -->
    <view style="height: 1px;width: 100%;background: #121212;"></view>
    <view style="margin: 20px;display: flex;">
      <view style="flex: 2;">
        <view style="color: #ffffff;font-weight: 700;font-size: 20px;margin-top: 0px;">{{$t("earn")}}</view>
        <view style="color: #939393;margin-top: 5px;">{{$t("home_earn1")}}</view>
        <view style="color: #939393;">{{$t("home_earn2")}}</view>
        <view style="margin-top: 14px;">
          <div class="tran_btn"
               @click="financialFn"
               style="width: 44%;margin-right: 20px;margin-left: 0px;
                 color: #ffffff;line-height: 30px;font-size: 16;font-weight: 500;height: 30px;">
            <text class="bib">
              {{$t("home_earn3")}}
            </text>

          </div>
        </view>
      </view>
      <view style="flex: 1;">
        <image src="/static/ucoin/image_finances_save_coin.png" style="width: 129px;height: 107px;"></image>
      </view>

    </view>

    <view style="margin: 20px;display: flex;margin-bottom: 150px;flex-direction: column;margin-top:30px;">




      <view style="color: #ffffff;font-weight: 700;font-size: 20px;margin-top: 0px;">{{$t("home_announcement")}}</view>

      <view v-for="item in news">
        <view style="color: #ffffff;margin-top: 5px;font-size: 16px;margin-top: 14px;">{{item.title}}</view>
        <view style="color: #939393;font-size: 12px;margin-top: 4px;">{{item.create_time}}</view>
      </view>

    </view>

    <u-popup v-model="showLanguage" mode="bottom" length="80%" :title="$t('setting.selectLang')">
      <view class="popup-list">
        <view class="popup-list-item" v-for="item in langs" :key="item.value" :class="{active : item.selected}"  @click="setLang(item)">
          <text style="color: #ffffff;">{{item.name}}</text>
        </view>
      </view>
    </u-popup>


    <!-- 自定义tabbar -->

    <TabBar :current-page="0" />



  </view>
</template>

<script>
import {
  currencys
} from "./../setting/data.js"
import {langs} from "./lang_data.js"
import {
  gupiao,
  coinCurrencyMarket
} from './data.js'
import TabBar from "@/components/common/tabbar/tabbar.vue"
import {
  makeBackground
} from "echarts/lib/component/helper/listComponent";
import $ from '@/static/jquery.js'
export default {
  data() {
    return {
      langs:null,
      showLanguage:false,
      chartData: {},
      optsGreen: {
        animation:false,
        categories:true,
        color: ["#25A750"],
        padding: [0,0,0,0],
        dataLabel: false,
        dataPointShape: false,
        enableScroll: false,
        legend: {},
        xAxis: {
          disabled:true,
          disableGrid: true,
          gridColor:"#000000",
          showTitle:false,
          axisLine:false,
        },
        yAxis: {
          disabled:true,
          disableGrid: true,
          gridColor:"#000000",
          showTitle:false

        },
        extra: {
          line: {
            type: "curve",
            width: 1.5,
            activeType: "hollow",
            linearType: "custom",
            onShadow: true,
            animation: "horizontal"
          }
        }
      },

      optsRed: {
        categories:true,
        color: ["#ca3f64"],
        padding: [0,0,0,0],
        dataLabel: false,
        dataPointShape: false,
        enableScroll: false,
        legend: {},
        xAxis: {
          disabled:true,
          disableGrid: true,
          gridColor:"#000000",
          showTitle:false,
          axisLine:false,
        },
        yAxis: {
          disabled:true,
          disableGrid: true,
          gridColor:"#000000",
          showTitle:false

        },
        extra: {
          line: {
            type: "curve",
            width: 1.5,
            activeType: "hollow",
            linearType: "custom",
            onShadow: true,
            animation: "horizontal"
          }
        }
      },
      componentsName: ['TabBar'],
      tabList:[ {name:this.$t("tabA0"),id:0},
                {name:this.$t("tabA1"),id:1},
                {name:this.$t("tabA2"),id:2},
                {name:this.$t("tabA3"),id:3},
                {name:this.$t("tabA4"),id:4},
                {name:this.$t("tabA5"),id:5}
      ],
      iURL:'',
      token:"",
      service_url:'',
      app_download_url:'',
      tabURL: 'spot_kline',
      hasChange: false,
      currentTab: 1,
      lang: '',
      swiper: [],
      activeHighQualityProject: 0,
      gupiao,
      activeGupiaoDot: 0,
      coinCurrencyMarket,
      quotationNav: [{
        name: this.$t("home.tradingPair"),
        sort: 'none',
        align: 'text-left'
      },
        {
          name: this.$t("home.lastPrice"),
          sort: 'none',
          align: 'justify-content-center',
        },
        {
          name: this.$t("home.todayChange"),
          sort: 'none',
          align: 'justify-content-end'
        }
      ],
      quotation: [],
      quotationTabList: [],

      quotationDotList: [],
      quotationOriginal: [],
      langs: null,
      showLanguage: false,
      originalNew: [],
      news: [],
      getQuotationInterval: null,

      showUpdate: false,
      downProgress: 0,
      tempFilePath: null,
      downType: 'wgt',
      homeNav: [],


      scrollTop: 0,
      pushUUID: "",
      old: {
        scrollTop: 0
      }
    };
  },
  components: {
    TabBar
  },

  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$store.state.site_name
    })
    uni.hideLoading();
    this.lazyFn();


    this.$https.initData({
      url: 'news/online',
      type: 'POST'
    }, (res, msg) => {
      console.log("在线客服==>"+JSON.stringify(res));

        this.service_url = res.service_url;
        this.app_download_url=res.app_download_url;

    });
    this.getNews();

  },
  onShow() {
    uni.hideLoading();
    console.log("this.$store.state.lang==>"+this.$store.state.lang);
    this.lang = this.$store.state.lang || 'zh';

    let pushUUID = uni.getStorageSync("pushUUID");
    if (pushUUID == null || pushUUID.length < 10) {
      pushUUID = this.uuid();

      uni.setStorageSync('pushUUID', pushUUID)
    }
    this.pushUUID = pushUUID;

    this.okxWS();
    this.token=uni.getStorageSync("token");
    if (!this.token||this.token.length<10){
      this.iURL="/pages/common/login"
    }else{
      this.iURL="/pages/setting/left_menu"
    }

    let token=uni.getStorageSync("token");
    if (token&&token.length>10) {
      this.$https.initDataToken({
        url: 'setOnline',
        type: 'POST',
      }, (res, msg) => {
        console.log("设置在线" + JSON.stringify(res));
      });
    }

    this.setDefaultLang();
    //uni.setStorageSync('lang',item.value)
    let defaultLang=uni.getStorageSync('lang');
    console.log("默认语言==>"+defaultLang);
    if (defaultLang==null||defaultLang==""){
      let tmpObj={
        name:'简体中文',
        value:'zh'
      };
      this.setLang(tmpObj)
    }
    this.changeTab(1);

  },
  methods: {
    setLang(item){
      let langs = this.langs.map(el=>{
        el.selected = false
        if(el.value === item.value) el.selected = true
        return el
      })
      this.langs = langs
      this._i18n.locale = item.value
      this.lang = item
      uni.setStorageSync('lang',item.value)
      this.$store.commit('setLang', item.value)
      setTimeout(()=>
      {
        this.showLanguage = false;
        uni.reLaunch({
          url: "/pages/index/index"
        })
      },200)
    },
    setDefaultLang(){
      let langsData = langs.map(el=>{
        el.selected = false
        return el
      })
      const lang = uni.getStorageSync('lang') || 'zh'
      const has = langsData.findIndex(item => item.value == lang)
      this.lang = langsData[has]

      langsData[has].selected = true
      this.langs = langsData
    },
    homeFn(){
      this.showLanguage = true;
    },
    getServerData(coin){
      let that=this;

      let url = "https://www.ucboin.com/market/binance/history/kline?limit=10&period=1D&coin="+coin;
      let data = [];
      uni.request({
        url: url,
        method: "GET",
        dataType: "json",  //指定服务器返回的数据类型
        //jsonpCallback: "showData",  //指定回调函数名称
        success: function (response) {
          data = response.data;
          data = JSON.parse(data.data);
          data = data.sort((a, b) => a[0] - b[0]);

          let dataArray=[];
          if (data && data.length > 0) {
            data.forEach((item, i) => {

              let close = Number(item[4]);
              dataArray.push(close);

            })
          }

          console.log("dataArray==>"+dataArray);

          let res = {
            categories:false,
            series: [
              {
                name: "",
                setShadow: [
                  3,
                  8,
                  10,
                  "#000000"
                ],
                data: dataArray
              },
            ]
          };

          for (let i=0;i<that.quotation.length;i++) {
            let  currencyName= that.quotation[i].currencyName;

            currencyName=currencyName.toLowerCase();
            currencyName=currencyName+"usdt";


            if (coin==currencyName){
              that.quotation[i].chartData= JSON.parse(JSON.stringify(res));

            }
          }

          // if (coin=="btcusdt") {
          //   that.chartData = JSON.parse(JSON.stringify(res));
          // }
          //
          // if (coin=="ethusdt"){
          //   that.chartDataETH = JSON.parse(JSON.stringify(res));
          // }
          // if (coin=="bnbusdt"){
          //   that.chartDataBNB = JSON.parse(JSON.stringify(res));
          // }
          // if (coin=="etcusdt"){
          //   that.chartDataTRX = JSON.parse(JSON.stringify(res));
          // }
          // if (coin=="ltcusdt"){
          //   that.chartDataLTC = JSON.parse(JSON.stringify(res));
          // }
          // if (coin=="adausdt"){
          //   that.chartDataADA = JSON.parse(JSON.stringify(res));
          // }



        }
      });

    },
    financialFn(){
      uni.switchTab({
        url:"/pages/financial/index"
      })
    },
    c2cFn(){
      this.token=uni.getStorageSync("token");
      if (!this.token||this.token.length<10){
        uni.redirectTo({
          url:'/pages/common/login'
        })
      }else{
        this.$utils.jump('/pages/c2c/c2c_home')
      }
    },
    upper: function(e) {
      console.log(e)
    },
    lower: function(e) {
      console.log(e)
    },
    scroll: function(e) {
      console.log(e)
      this.old.scrollTop = e.detail.scrollTop
    },
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid;
    },
    contactUsFn(){
      window.open(this.service_url);
    },
    lazyFn() {
      this.getQuotation();//获取首页行情
      this.getMenu();//获取首页菜单
    },
    okxWS() {
      let that = this;
      let userId = that.pushUUID;
      let url = 'wss://www.ucboin.com/market/websocket2/' + userId;
	  // let url = 'wss://api.hbdm.com/swap-ws?contract_code=BTC-USD&type=step1'

      uni.connectSocket({
        url: url
      });
      uni.onSocketOpen(function (res) {
        console.log('WebSocket连接已打开！');
        that.socketOpen = true;
      });
      uni.onSocketError(function (res) {
        console.log('WebSocket连接打开失败，请检查！');
      });
      uni.onSocketMessage(function (res) {
        try {
          let data = res.data;

          data = JSON.parse(data);
          let coin = data.coin;

          let msgTxt = data.msgTxt;

          msgTxt = JSON.parse(msgTxt);
		  console.log(msgTxt)
          let e = msgTxt.e;
          if (e === "kline") {
            let k = msgTxt.k;

            let change=data.change;//0619修改

            if (that.quotation != null && that.quotation.length > 0) {
              for (let i = 0; i < that.quotation.length; i++) {
                let jo = that.quotation[i];
                let symbol = jo.currencyName;

                symbol = symbol.toLowerCase();
                let close = k.c;
                let high = k.h;
                let vol = k.v;
                let low = k.l;
                let open = k.o;


                let symbolStr = symbol + "USDT";

                if (symbol == coin) {
                  close = Number(close).toFixed(2);
                  jo.price = close;


                  jo.close = close;
                  jo.high = high;
                  jo.low = low;
                  jo.volume = vol;
                  jo.usdRate = close;

                  jo.change = change.toFixed(2);//0619修改


                }


              }
            }
          }
        }catch (e){
          console.log(e);
        }



      });

    },
    handleScroll() {
      //获取当前页面的滚动条纵坐标位置      网页被卷去的高
      const top = document.documentElement.scrollTop || document.body.scrollTop
      if (top > 60) {

        this.hasChange = true;
      } else {
        this.hasChange = false;
      }

    },
    getRealCoin(favCoinID){
      for (let i=0;i<this.quotationOriginal.length;i++){
        let item=this.quotationOriginal[i];
        let currencyID=item.id;
        if (currencyID === favCoinID){
          return item;
        }
      }
      return null;
    },
    favListFn() {
      let that = this;
      that.token=uni.getStorageSync("token");
      if (!that.token||that.token.length<10){
        uni.redirectTo({
          url:'/pages/common/login'
        })
      }else {
        let newFavList = [];
        this.$https.initDataToken({
          url: 'optional/list',
          type: 'GET'
        }, (data, msg) => {
          if (data) {
            let favList = data;//自选List=>[{"id":13,"symbol":"BTC/USDT","memberId":600840,"addTime":"2024-02-18 16:56:23"}]
            if (favList && favList.length > 0) {

              for (let i = 0; i < favList.length; i++) {
                let item = favList[i];
                let currency_id = item.currency_id;
                console.log("currency_id=>" + currency_id);
                let newItem = that.getRealCoin(currency_id);
                if (newItem) {
                  newFavList.push(newItem);
                }
              }
              that.quotationTabList = newFavList;//currencyName
            }
            console.log("自选List=>" + JSON.stringify(that.quotationTabList));
          }

          //
        })
      }
    },
    changeTab(itemId) {
      this.currentTab = itemId;
      this.quotationTabList=[];
      if (itemId==0) {
        this.favListFn();
      }
      console.log("当前Tab==>"+itemId);
      if (itemId==1) {
        for (let i=0;i<this.quotationOriginal.length;i++){
          let po=this.quotationOriginal[i];
          if (i<4) {
            this.quotationTabList.push(po);
          }
        }
      }
      //
      if (itemId==2) {
        for (let i=0;i<this.quotationOriginal.length;i++){
          let po=this.quotationOriginal[i];
          if (i>=4 && i <6) {
            this.quotationTabList.push(po);
          }
        }
      }
      if (itemId==2) {
        for (let i=0;i<this.quotationOriginal.length;i++){
          let po=this.quotationOriginal[i];
          if (i>=6 && i <8) {
            this.quotationTabList.push(po);
          }
        }
      }
      if (itemId==3) {
        for (let i=0;i<this.quotationOriginal.length;i++){
          let po=this.quotationOriginal[i];
          if (i>=8&& i<10) {
            this.quotationTabList.push(po);
          }
        }
      }
      if (itemId==4) {
        for (let i=0;i<this.quotationOriginal.length;i++){
          let po=this.quotationOriginal[i];
          if (i>=10&& i<12) {
            this.quotationTabList.push(po);
          }
        }
      }
      if (itemId==5) {
        for (let i=0;i<this.quotationOriginal.length;i++){
          let po=this.quotationOriginal[i];
          if (i>=9&& i<11) {
            this.quotationTabList.push(po);
          }
        }
      }


      //

    },


    //检查更新
    checkUpdate() {
      this.$u.api.common.getSetting('version').then(res => {
        const version = res.message.value.split(',')
        // version[0]:更新方式,wgt还是apk,version[1]:最新的版本号
        this.checkHotUpdate(version[0], version[1])
      })
    },
    //获取个人信息
    getUserInfo() {
      this.$u.api.setting.getUserInfo().then(res => {
        this.$store.commit('refreshUser', res.message)
      })
    },
    //获取首页菜单
    getMenu() {
      const {
        i18n
      } = this;


      let list = [
        {
          "id": 4,
          "name": "\u7533\u8d2d",
          "title": "ieo",
          "icon": "new0822",
          "url": "\/pages\/ieo\/ieo",
          "sort": 1,
          "show": 1,
          "open_type": "navigateTo",
          "is_financial": 1
        },
        {
          "id": 5,
          "name": "\u9501\u4ed3\u6316\u77ff",
          "title": "lockming",
          "icon": "home-nav-4",
          "url": "\/pages\/lockming\/lockming",
          "sort": 2,
          "show": 1,
          "open_type": "navigateTo",
          "is_financial": 1
        },
        // {
        //   "id": 6,
        //   "name": "\u8ddf\u5355",
        //   "title": "copytrade",
        //   "icon": "gendan",
        //   "url": "\/pages\/follow\/index",
        //   "sort": 3,
        //   "show": 1,
        //   "open_type": "navigateTo",
        //   "is_financial": 0
        // },
        // {
        //   "id": 8,
        //   "name": "\u5e2e\u52a9\u4e2d\u5fc3",
        //   "title": "help",
        //   "icon": "home-nav-88",
        //   "url": "\/pages\/common\/help",
        //   "sort": 4,
        //   "show": 1,
        //   "open_type": "navigateTo",
        //   "is_financial": 0
        // },
        {
          "id": 3,
          "name": "\u9080\u8bf7\u8fd4\u4f63",
          "title": "invite_fanyong",
          "icon": "yaoqing",
          "url": "\/pages\/invite\/invite",
          "sort": 5,
          "show": 1,
          "open_type": "navigateTo",
          "is_financial": 0
        },
        {
          "id": 9,
          "name": "\u79d2\u5408\u7ea6",
          "title": "option",
          "icon": "icon_my_home_s",
          "url": "\/pages\/transaction\/options",
          "sort": 6,
          "show": 1,
          "open_type": "navigateTo",
          "is_financial": 0
        },
        // {
        //   "id": 1,
        //   "name": "\u5145\u503c",
        //   "title": "recharge",
        //   "icon": "home-nav-1",
        //   "url": "\/pages\/fund\/select?url=receive",
        //   "sort": 7,
        //   "show": 1,
        //   "open_type": "navigateTo",
        //   "is_financial": 0
        // },
        // {
        //   "id": 2,
        //   "name": "\u63d0\u73b0",
        //   "title": "withdraw",
        //   "icon": "home-nav-2",
        //   "url": "\/pages\/fund\/withdraw",
        //   "sort": 8,
        //   "show": 1,
        //   "open_type": "navigateTo",
        //   "is_financial": 0
        // },
        {
          "id": 7,
          "name": "\u5212\u8f6c",
          "title": "contactUs",
          "icon": "home-nav-7",
          "url": "\/pages\/fund\/cs",
          "sort": 9,
          "show": 1,
          "open_type": "navigateTo",
          "is_financial": 0
        },
        // {
        //   "id": 17,
        //   "name": "\u5212\u8f6c",
        //   "title": "download",
        //   "icon": "android0109",
        //   "url": "/pages/fund/app_download_url",
        //   "sort": 9,
        //   "show": 1,
        //   "open_type": "navigateTo",
        //   "is_financial": 0
        // },
        // {
        //   "id": 27,
        //   "name": "\u5212\u8f6c",
        //   "title": "dzp",
        //   "icon": "dzp",
        //   "url": "/pages/common/dzp",
        //   "sort": 9,
        //   "show": 1,
        //   "open_type": "navigateTo",
        //   "is_financial": 0
        // }
      ];
      list.forEach(item => {
        item.name = i18n[item.title];
        let icon = item.icon;
        if (icon == "home-nav-1") {
          item.icon = "cz";
        }
        if (icon == "home-nav-6") {
          item.icon = "exchange";
        }
        if (icon == "home-nav-2") {
          item.icon = "tx";
        }
      })
      let newList = [],
          index = 0
      for (let i = 0; i < list.length; i++) {

        newList[index] = list.slice(10 * index, 10 * index + 10);

        index = index + 1
        i = (i + 1) * 10 - 1
      }
      //将list已8个为一组分组

      this.homeNav = newList;

    },


    // 获取首页公告
    getNews() {
      this.$https.initData({
        url: 'news/list',
        data: {
          c_id: 4,
          lang: uni.getStorageSync('lang')
        },
        type: 'POST'
      }, (res, msg) => {
        console.log(JSON.stringify(res));
        this.originalNew = res.list
        this.news = res.list;

      })
    },

    getQuotation() {
      let that = this;
      uni.request({
        url: "https://www.ucboin.com/market/binance/redis/getLatestQuotations",
        type: "GET",
        dataType: "json",
        success: function (response) {

          let quotationList = response.data.data;
          that.quotationOriginal=quotationList;
          //quotationList=quotationList.slice(0,6);
          that.quotation = quotationList;

          for (let i=0;i<that.quotation.length;i++) {
            let  currencyName= that.quotation[i].currencyName;
            currencyName=currencyName.toLowerCase();
            that.getServerData(currencyName+"usdt");

            if (i<4) {
              that.quotationTabList.push(that.quotation[i]);
            }

          }

          for (let i = 0; i < quotationList.length - 2; i++) {
            that.quotationDotList.push({});
          }




        }
      });
    },
    getQst() {
      const from = Date.parse(new Date()) / 1000 - 12 * 60 * 60
      const to = Date.parse(new Date()) / 1000

      this.$u.api.index.getQuotationHome().then(async res => {
        this.quotation = res.message[0].quotation_home
        //对quotation进行排序检测
        let quotation = this.quotation.sort((a, b) => Number(a.sort) - Number(b.sort))
        for (let i = 0; i < quotation.length; i++) {
          let item = quotation[i]
          const ret = await this.$u.api.market.getHistoryData(from, to, item.currencyName +
              '/' + item.legal_name, '1min')
          item.chartData = {
            series: [{
              name: 'area',
              data: ret.data.map(item => item.close)
            }],
            categories: ret.data.map(item => item.time)
          }

        }


        this.quotation = quotation
        //this.sort('quotation')


        this.startSocket();


      })
    },

    gupiaoSwiperChange(e) {
      this.activeGupiaoDot = e.detail.current;
    },
    changeNavSort(opt, index, listName) {
      let data = JSON.parse(JSON.stringify(this[opt]))
      //先将其所有的都置为none
      data.forEach((el, ii) => {
        if (ii != index) el.sort = 'none'
      })
      if (data[index].sort == 'none') {
        data[index].sort = 'up'
      } else if (data[index].sort == 'up') {
        data[index].sort = 'down'
      } else if (data[index].sort == 'down') {
        data[index].sort = 'none'
      }
      this[opt] = data
      this.sort(listName)

    },
    sort(listName) {
      const navName = `${listName}Nav`
      const nav = this[navName]

      const originalName = `${listName}Original`
      const original = this[originalName]

      let sort, index = -1
      //查询nav中是否有排序
      nav.forEach((item, ind) => {
        if (item.sort != 'none') {
          sort = item.sort
          index = ind
        }
      })

      let sortMethod = null
      if (index == -1) {
        this[listName] = original
      } else if (index == 0) {
        //对交易对做排序
        if (sort == 'up') {
          sortMethod = (a, b) => (a.currencyName + '').localeCompare(b.currencyName + '')
        } else {
          sortMethod = (a, b) => (b.currencyName + '').localeCompare(a.currencyName + '')
        }
        this[listName] = this[listName].sort(sortMethod)
      } else if (index == 1) {
        if (sort == 'up') {
          sortMethod = (a, b) => Number(a.now_price) - Number(b.now_price)
        } else {
          sortMethod = (a, b) => Number(b.now_price) - Number(a.now_price)
        }
        this[listName] = this[listName].sort(sortMethod)
      } else if (index == 2) {

        if (sort == 'up') {
          sortMethod = (a, b) => Number(a.change) - Number(b.change)
        } else {
          sortMethod = (a, b) => Number(b.change) - Number(a.change)
        }
        this[listName] = this[listName].sort(sortMethod)
      }

    },
    //根据数字政府判断颜色
    num2Color(num) {
      num = num + ''
      if (num.includes("%")) {
        num = num.slice(0, num.length - 1)
      }
      num = +num
      if (num >= 0) {
        return '#25A750'
      } else {
        return '#ca3f64'
      }
    },
    //点击公告
    clickNoticeBar(index) {
      const item = this.originalNew[index]
      uni.navigateTo({
        url: '/pages/common/article?id=' + item.id
      })
    },


    //点击首页菜单的跳转
    homeNavJump(url, openType) {
      let token=uni.getStorageSync("token");
      if (token==null||token.length<10){
        uni.redirectTo({
          url:'/pages/common/login'
        })
      }else {
        let s=this.service_url;
        if (url==="/pages/fund/cs"){
          window.location.href="https://mamdk.kanuomei.com/Web/im.aspx?_=t&accountid=150034"

        } else if (url==="/pages/fund/app_download_url"){
          let app_download_url=this.app_download_url;
          window.open(app_download_url);
        } else {

          //this.$utils.jump("/pages/transaction/micro", "navigateTo")
          if (url) {
            if (url=="/pages/transaction/options"){
              uni.navigateTo({
                url: '/pages/transaction/options'
              })
            }else {
              this.$utils.jump(url, openType)
            }
          } else {
            this.$utils.showToast(this.$t("common.functionLoading"))
          }
        }
      }
    }
  },
  computed: {
    i18n() {
      return this.$t("home")
    },

    gupiaoNums() {
      return gupiao.length - 2
    },
    hqNums() {

      return this.quotation.length - 2
    }
  },
  watch: {
    //当语言发生变化时
    '$store.state.lang'(val) {
      const {
        i18n
      } = this

      this.$utils.setTabbar(this)


      this.homeNav.forEach(item => {
        item.name = i18n[item.title]
      })
    }
  },
  filters: {
    sort2Icon(sort) {
      switch (sort) {
        case 'none':
          return require('static/image/icon/sort.png');
          break;
        case 'up':
          return require('static/image/icon/sort-up.png');
          break;
        case 'down':
          return require('static/image/icon/sort-down.png');
          break;
      }
    },
  },
  onHide() {

  },
  onUnload() {

  }
}
</script>
<style lang="scss" scoped>
page{
  background: #000000;
}
// .home {
// 	background-image: url('./../../static/image/icon/home-bg.png');
// 	background-repeat: no-repeat;
// 	background-size: 100% 375rpx;
// 	padding-bottom: 50rpx;
// 	width: 100vw;
// 	overflow: hidden;
// 	padding-top: var(--status-bar-height);
// }

.home {
  overflow: hidden;
  padding-top: var(--status-bar-height);
  position: relative;
  background: #ffffff;
  background-repeat: no-repeat;
  background-size: 100% 530 rpx;
  background-position: left top;
  padding-bottom: 180 rpx;
}

.home-nav {
  border-radius: 20 rpx;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.home-title-item {
  font-size: 16px;
  margin-right: 40 rpx;

  &::after {
    display: block;
    content: '';
    width: 50%;
    //background-color: #fff;
    height: 6 rpx;
    border-radius: 10 rpx;
    margin: 0 auto;
    margin-top: 8 rpx;
    overflow: hidden;
    transition: all .3s ease 0s;
  }

}

.linear-gradient-green {
  background-image: linear-gradient(to right, #00d789, #00e1cc);
}


//.high-quality-project {
//	.high-quality-project-item {
//		//border-radius: 20rpx;
//		width: 96%;
//		text-align: center;
//		padding-top: 40rpx;
//		height: 390rpx;
//		//background-color: $uni-color-black;
//		color: white;
//
//		.hige-quality-project-sskc {
//			@extend .linear-gradient-green;
//			font-size: 24rpx;
//			color: #fff;
//			height: 40rpx;
//			line-height: 40rpx;
//			padding: 0 18rpx;
//			border-radius: 10rpx 0 10rpx 0;
//			display: block;
//			position: absolute;
//			left: 0;
//			top: 0;
//		}
//	}
//}


.high-quality-project2 {
  .high-quality-project-item {
    border-radius: 20 rpx;
    width: 96%;
    text-align: center;
    padding-top: 40 rpx;
    height: 390 rpx;
    background-color: #FFFFFF;
    color: white;

    .hige-quality-project-sskc {
      @extend .linear-gradient-green;
      font-size: 24 rpx;
      color: #fff;
      height: 40 rpx;
      line-height: 40 rpx;
      padding: 0 18 rpx;
      border-radius: 10 rpx 0 10 rpx 0;
      display: block;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}


.swiper-container {
  overflow: visible;
}

.swiper-wrapper {
  /* 通过改变animation-timing-function 制作弹性切换效果 */
  transition: .2s cubic-bezier(0.68, -0.2, 0.27, 1.34) .05s;
}

// 股票
.gupiao-item {
  background-color: #95e2d0;
  border-radius: 8 rpx;
  overflow: hidden;
  width: 214 rpx;
  padding: 24 rpx 0 20 rpx;
  text-align: center;

  .code {
    font-size: 10px;
    color: white;
    border-radius: 4 rpx;
    background-color: #80AEFB;
    margin-right: 7 rpx;
    padding: 0 4 rpx;
  }

  &.up {
    background-color: #95e2d0;

    .color {
      color: $uni-color-success;
    }
  }

  &.down {
    background-color: #fbe7eb;

    .color {
      color: $uni-color-error;
    }
  }
}

.gupiao-swiper-dots {
  margin-top: 0px;
  display: flex;
  justify-content: center;

  .gupiao-swiper-dot {
    width: 36 rpx;
    height: 10 rpx;
    background-color: #999999;
    opacity: .5;
    border-radius: 5px;
    margin-right: 4 rpx;

    &.active {
      opacity: 1;
      background-color: #2A64FB;
    }
  }
}

.market {
  .market-item:hover {

    background: #242424;
  }

  .market-item {
    overflow: hidden;
    padding: 32 rpx 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    align-items: center;
    display: grid;
    grid-template-columns: 1.2fr 1.2fr .8fr;

    .left {
      overflow: hidden;
    }

    .center {
      flex: 1;
      text-align: center;
    }

    .right {
      width: 100%;
      height: 50 rpx;
      line-height: 50 rpx;
      text-align: center;
      border-radius: 10 rpx;
      background-color: #15be97;
      color: #fff;
    }
  }
}

.jshd {
  .jshd-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56 rpx;
    background-image: linear-gradient(to right, rgba(237, 241, 250, 0), rgba(237, 241, 250, 1));
    border-radius: 27.5 rpx;
    padding-right: 24 rpx;
    margin-right: 30 rpx;

    .num {
      background-image: url('./../../static/image/icon/home-icon-4.png');
      background-size: cover;
      width: 38 rpx;
      height: 38 rpx;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      line-height: 38 rpx;
      font-size: 28 rpx;
    }

    .text {
      font-size: 28 rpx;
      margin-left: 16 rpx;
    }
  }

  .jshd-table {

    image,
    img {
      width: 50 rpx;
      height: 50 rpx;
    }

    .jshd-table-td {
      padding: 14 rpx 0;
    }

  }
}

.w-26 {
  width: 26%;
}

.w-18_5 {
  width: 18.5%;
}

// 弹出层列表
.popup-list {
  .popup-list-item {
    height: 96 rpx;
    line-height: 96 rpx;
    padding: 0 30 rpx;
    font-size: 32 rpx;
    position: relative;
    display: flex;
    align-items: center;

    &:before {
      content: "";
      position: absolute;
      left: 30 rpx;
      right: 30 rpx;
      bottom: 0;
      height: 2 rpx;
      background-color: #efefef;
    }

    &.active {
      background-color: #f2f6ff;

      &:after {
        content: "";
        width: 36 rpx;
        height: 20 rpx;
        background-image: url('/static/image/icon/setting-icon-20.png');
        background-size: cover;
        position: absolute;
        right: 80 rpx;
        top: 50%;
        margin-top: -10rpx;
      }
    }
  }
}

.notice {
  background: #4D4D4D;
  color: #fff;
  border-radius: 20px;

  .heading {
    background: url('../../static/image/icon/bg-notice-heading.png') center no-repeat;
    background-size: 155px 60px;
    height: 60px;
    line-height: 60px;
  }
}

.notice-close {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -80px;
  text-align: center;
}

.uni-scroll-view {
  overflow: inherit !important;
}

.update {
  padding-bottom: 200 rpx;

  .update-bg {
    height: 96 rpx;
    background-image: url('./../../static/image/icon/update-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .buttons {
    position: absolute;
    left: 40 rpx;
    right: 40 rpx;
    bottom: 46 rpx;

    .btn {
      width: 47%;
      height: 60 rpx;
      line-height: 60 rpx;
      font-size: 26 rpx;
      border: 2 rpx solid #ef324c;
      margin: 0;

      &.btn2 {
        background-color: #ef324c;
        color: #fff;
      }
    }
  }

}

.index-download {
  background-color: $uni-color-black;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 96 rpx;
  padding: 30 rpx;
  z-index: 10;
  color: #fff;
  display: flex;
  align-items: center;

}

.kefu {
  /* #ifdef APP-PLUS */
  bottom: 60 rpx;
  /* #endif */
  /* #ifdef H5 */
  bottom: 260 rpx;
  /* #endif */
}

.noticeContainer {
  .bdb_blue3 {}

  .noticeview {
    .Icon {
      //background: url() no-repeat;
      background-image: url(../../static/more.png);
      background-size: 100% 100%;
      width: 32 upx;
      height: 32 upx;
      display: inline-block;
      vertical-align: middle;
      margin-right: 16px;
    }

    .noticeIcon {
      width: 56 upx;
      height: 26 upx;
      display: inline-block;
      margin-left: 0px;
      background-size: 100% 100%;
      text-align: center;
      margin-top: 3px;
      border-radius: 2px;
      font-weight: 200;


    }
  }
}

.activeTab {
  color: #ffffff;
  width: 30px;
  border-width: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #ffffff;
}

.normalTab {
  width: 30px;
  border-width: 12px;
  padding-bottom: 8px;
  color: #939393;
  //border-bottom: 2px solid #07c67b;
}

.swiper-item8:hover {
  background: transparent;
}
.connect_btn {
  border: 1px solid #c0dd2b;
}

.tran_btn {
  border: 1px solid #c0dd2b;
  border-radius: 20px;
  text-align: center;
}

.bib {

  background-clip: text;
  text-fill-color: transparent;
  text-align: center;
}
.currentTab{
  background: #ffffff;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 16px;
  color: #000000;
}
.normalTab2024{
  background: #1f1f1f;
  color: #fffff;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 16px;
}
.charts-box {
  width: 80%;
  height: 80px;
}

.popup-list{
  .popup-list-item{
    height: 96rpx;
    line-height: 96rpx;
    padding: 0 30rpx;
    font-size: 32rpx;
    position: relative;
    display: flex;
    align-items: center;
    &:before{
      content: "";
      position: absolute;
      left: 30rpx;
      right: 30rpx;
      bottom: 0;
      height: 1rpx;
      background-color: #2f2f2f;
    }
    &.active{
      background-color: #242424;
      &:after{
        content: "";
        width: 40rpx;
        height: 40rpx;
        background-image: url('../../static/uzx/icon_coin_select_yes.png');
        background-size: cover;
        position: absolute;
        right: 80rpx;
        top: 50%;
        margin-top:-20rpx;
      }
    }
  }
}
</style>
